<template lang="pug">
  div
    template(v-if="$route.path === '/operative/crm/contract'")
      el-radio-group.clientTypes(v-model="curTabKey")
        el-radio-button(v-for="(tab, key) in contractTypes" :key="key" :label="key") {{tab.title}}
      s-table(
        ref="table"
        :queryFn="curTab.queryFn"
        :column="curTab.column"
        :queryPropsParams="{ ...curTab.queryPropsParams, areaId: curArea.areaId }"
        :filterProps="{ fields: curTab.searchItems }"
        :initParameter="true"
        :callback="({parameter}) => tableCallback({ parameter: { ...parameter, curTab: 'Contract', curTabKey } })"
      )
        .table-operator(slot="table-operator")
          el-button.gradientVertical(size="large" round @click="() => modalHandle('add')") 新增
        template(slot="beginDate" slot-scope="text, scope") {{text | dateFilter}}
        template(slot="endDate" slot-scope="text, scope") {{text | dateFilter}}
        template(slot="statusVal" slot-scope="text, scope")
          el-tag(size="mini" :type="dictFilter(scope.status, 'contractStatus', 'id', 'type')") {{text}}
        template(slot="action" slot-scope="text, scope")
          el-link(@click="infoHandle(scope.id)" type="primary") 详情
    router-view(v-else)
    add-by-baby(:visible.sync="modalObj.visible")
</template>
<script>
import { mapGetters } from 'vuex'
import { dictMixin, pagerMixin } from '@/mixins'
import { contractTypes } from './config'
import AddByBaby from '../../components/contractAddByBaby'

export default {
  name: 'Contract',
  components: {
    addByBaby: AddByBaby
  },
  mixins: [dictMixin, pagerMixin],
  data () {
    return {
      curTabKey: 'all',
      contractTypes,
      modalObj: {
        visible: false
      }
    }
  },
  computed: {
    ...mapGetters(['curArea', 'dict']),
    curTab () {
      const { curTabKey } = this
      return contractTypes[curTabKey]
    }
  },
  watch: {
    curTabKey (val) {
      this.tableCallback({ ...this.pageParameter, curTabKey: val })
      this.$nextTick(function () {
        this.refreshTable(true)
      })
    }
  },
  created () {
    this.curTabKey = this.pageParameter.curTabKey || 'all'
  },
  methods: {
    // 刷新列表
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    modalHandle () {
      this.modalObj = {
        visible: true
      }
    },
    infoHandle (id) {
      this.$router.push({
        path: '/operative/crm/contract/info',
        query: { id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.clientTypes{
  ::v-deep{
    .el-radio-button__inner{

      &:hover, &:focus{
        box-shadow: none;
        color: #fff;
        background: linear-gradient(0deg, $--app-linear-gradient-stop1 0%, $--app-linear-gradient-stop2 100%);
      }
    }

    .el-radio-button{
      &.is-active{
        box-shadow: none;
      }
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner{
      background: linear-gradient(0deg, $--app-linear-gradient-stop1 0%, $--app-linear-gradient-stop2 100%);
      border-image: linear-gradient(0deg, rgba(245, 172, 60, 0.7), rgba(170, 205, 34, 0.7)) 1 1;
      box-shadow: none;
    }
  }
}
</style>
